<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /* var shopObj = {}  //  定义发布者
    shopObj.list = []  //  缓存列表，存放的是订阅的函数
    // 增加订阅者
    shopObj.listen = function(fn){
      shopObj.list.push(fn)
    }
    // 发布消息
    shopObj.trigger = function(){
      for (var i = 0 , fn ; fn < this.list[i++];) {
        fn.apply(this,arguments)
      }
    }
    shopObj.listen(function(color,size){
      console.log(`颜色是${color}`);
      console.log(`尺码是${size}`);
    })
    shopObj.listen(function(color,size){
      console.log(`再次颜色是${color}`);
      console.log(`再次尺码是${size}`);
    })
    shopObj.trigger('red',42)
    shopObj.trigger('black',43) */

    /* var shopObj = {} //  定义发布者
    shopObj.list = [] //  缓存列表，存放的是订阅的函数
    // 增加订阅者
    shopObj.listen = function (key, fn) {
      if (!this.list[key]) this.list[key] = []
      shopObj.list.push(fn)
    }
    // 发布消息
    shopObj.trigger = function () {
      // 对应的key取出来
      var key = Array.prototype.shift.call(arguments) // arg是类数组对象，不具备数组中shift方法
      var fns = this.list[key];
      if (!fns || fns.length == 0) return;
      for (var i = 0, fn; fn < this.fns[i++];) {
        fn.apply(this, arguments)
        // fn.apply(...arguments)  ES6
      }
    }
    shopObj.listen('red', function (size) {
      console.log(`尺码是${size}`);
    })
    shopObj.listen('black', function (size) {
      console.log(`尺码是${size}`);
    })
    shopObj.trigger('red', 42)
    shopObj.trigger('black', 43) */


    /* var event = {
      list: [],
      listen: function (key, fn) {
        if (!this.list[key]) this.list[key] = []
        shopObj.list.push(fn)
      },
      trigger: function () {
        var key = Array.prototype.shift.call(arguments)
        var fns = this.list[key];
        if (!fns || fns.length == 0) return;
        for (var i = 0, fn; fn < this.fns[i++];) {
          fn.apply(this, arguments)
        }
      }
    }
    // 取消订阅
    event.remove = function (key, fn) {
      var fns = this.list[key];
      if (!fns) return false;
      if (!fn) {
        fn && (fns.length == 0)
      } else {
        for (var i = fns.length - 1; i >= 0; i--) {
          var _fn = fns[i]
          if (_fn == fn) fns.splice(i, 1)
        }
      }
    } */

    var Event = (function () {
      var list = {},
        listen, trigger, remove;
      listen = function (key, fn) {
        if (!this.list[key]) this.list[key] = []
        shopObj.list.push(fn)
      }
      trigger = function () {
        var key = Array.prototype.shift.call(arguments)
        var fns = this.list[key];
        if (!fns || fns.length == 0) return;
        for (var i = 0, fn; fn < this.fns[i++];) {
          fn.apply(this, arguments)
        }
      }
      remove = function (key, fn) {
        var fns = this.list[key];
        if (!fns) return false;
        if (!fn) {
          fn && (fns.length == 0)
        } else {
          for (var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i]
            if (_fn == fn) fns.splice(i, 1)
          }
        }
      }
      return {
        listen,
        trigger,
        remove
      }
    })()
  </script>
</body>

</html>